import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { Select } from 'antd';

import { getChannels } from '@/store/actions/article';

// 自定义 channel 组件。注意：是配合 antd 组件规则的自定义组件

export const Channel = ({ value, onChange, width = 264 }) => {
  // react-redux
  const dispatch = useDispatch();

  // 频道列表数据
  const channels = useSelector((state) => state.article.channels);

  // 获取数据
  useEffect(() => {
    dispatch(getChannels());
  }, [dispatch]);

  return (
    <Select
      placeholder="请选择文章频道"
      style={{ width: width }}
      value={value}
      onChange={onChange}
    >
      {channels.map((item) => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  );
};
